<style scoped lang="scss">
  .app-container.home{
    position: absolute; 
    top: 0; left: 0;
    right: 0; bottom: 0; padding: 0;
  }

  // 测温仪统计面板
  .temperature-machine-statistic{
    .item-circle{
      width: 100%; height: 50%; 
      text-align: center;
      color: rgba(255, 255, 255, .8);
      padding-top: 20%;

      .border-danger{ border: 8px solid rgba(253, 131, 111, 1); }
      .border-success{  border: 8px solid rgba(43, 241, 236, 1); }

      .value{
        width: 50%; padding: 14% 0;
        border-radius: 50%; margin: 0 auto;
      }
      .label{
        height: 20px; line-height: 20px;
        font-size: 12px; margin-top: 5px;
      }
    }
  }


</style>
<template>
  <div class="app-container home">

    <!-- 左侧菜单栏 -->
    <BigDataLeftMenu :menuId="'machine'"/>

    <!-- 体温安全指数 -->
    <SafetyIndex ></SafetyIndex>

    <!-- 测温仪设备统计 -->
    <!-- <el-row style="z-index: 10;">
     
      <el-col :span="8" style="z-index: 10;">
        <BigDataCard class="temperature-machine-statistic" :height="'380px'"
          :mainTitle="'智能测温仪'" :subTitle="'实时使用数据'" >
          <template slot="rectangleContent">
              <el-col :span="8" style="height: 100%;">
                <div class="item-circle">
                  <div class="value border-danger">15</div>
                  <div class="label">设备在线数（台）</div>
                </div>
                <div class="item-circle">
                  <div class="value border-success">30</div>
                  <div class="label">设备总数（台）</div>
                </div>
              </el-col>
              <el-col :span="16" style="height: 100%;">
                <StackedHorizontalBar />
              </el-col>
          </template>
        </BigDataCard>
      </el-col>
      <el-col :span="10"></el-col>
    </el-row> -->
 

    
  </div>
</template>

<script>
import SafetyIndex from "@/views/bigData/components/common/SafetyIndex.vue";
import BigDataCard from "@/views/bigData/components/Card-1.vue";
import BigDataLeftMenu from "@/views/bigData/components/LeftMenu-1.vue";
import StackedHorizontalBar from "@/views/dashboard/diy/StackedHorizontalBar.vue";

export default {
  name: "BigDataStudent",
  components: {
    BigDataLeftMenu, SafetyIndex,
    BigDataCard,
    StackedHorizontalBar
  },
  data() {
    return {

    };
  },
  created(){
  
    
  },
  methods: {
    
  },
};
</script>



